﻿<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>仪表盘3</title>
    <script src="/Content/Scripts/jquery-1.8.3.min.js"></script>
    <script src="/Content/Scripts/highcharts/highcharts.js"></script>
    <script src="/Content/Scripts/highcharts/highcharts-more.js"></script>

    <script>
        $(function () {
            $('#container').highcharts({

                chart: {
                    type: 'gauge',
                    plotBorderWidth: 1,
                    plotBackgroundColor: {
                        linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                        stops: [
                            [0, '#FFF4C6'],
                            [0.3, '#FFFFFF'],
                            [1, '#FFF4C6']
                        ]
                    },
                    plotBackgroundImage: null,
                    height: 200
                },

                title: {
                    text: '标题'
                },

                pane: [{
                    startAngle: -45,
                    endAngle: 45,
                    background: null,
                    center: ['25%', '145%'],
                    size: 300
                }, {
                    startAngle: -45,
                    endAngle: 45,
                    background: null,
                    center: ['75%', '145%'],
                    size: 300
                }],

                yAxis: [{
                    min: -20,
                    max: 6,
                    minorTickPosition: 'outside',
                    tickPosition: 'outside',
                    labels: {
                        rotation: 'auto',
                        distance: 20
                    },
                    plotBands: [{
                        from: 0,
                        to: 6,
                        color: '#C02316',
                        innerRadius: '100%',
                        outerRadius: '105%'
                    }],
                    pane: 0,
                    title: {
                        text: 'VU<br/><span style="font-size:8px">Channel A</span>',
                        y: -40
                    }
                }, {
                    min: -20,
                    max: 6,
                    minorTickPosition: 'outside',
                    tickPosition: 'outside',
                    labels: {
                        rotation: 'auto',
                        distance: 20
                    },
                    plotBands: [{
                        from: 0,
                        to: 6,
                        color: '#C02316',
                        innerRadius: '100%',
                        outerRadius: '105%'
                    }],
                    pane: 1,
                    title: {
                        text: 'VU<br/><span style="font-size:8px">Channel B</span>',
                        y: -40
                    }
                }],

                plotOptions: {
                    gauge: {
                        dataLabels: {
                            enabled: false
                        },
                        dial: {
                            radius: '100%'
                        }
                    }
                },


                series: [{
                    data: [-20],
                    yAxis: 0
                }, {
                    data: [-20],
                    yAxis: 1
                }]

            },

         // Let the music play
         function (chart) {
             setInterval(function () {
                 var left = chart.series[0].points[0],
                     right = chart.series[1].points[0],
                     leftVal,
                     inc = (Math.random() - 0.5) * 3;

                 leftVal = left.y + inc;
                 rightVal = leftVal + inc / 3;
                 if (leftVal < -20 || leftVal > 6) {
                     leftVal = left.y - inc;
                 }
                 if (rightVal < -20 || rightVal > 6) {
                     rightVal = leftVal;
                 }

                 left.update(leftVal, false);
                 right.update(rightVal, false);
                 chart.redraw();

             }, 500);

         });
        });
    </script>
</head>
<body>
    <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</body>
</html>
